import { Component } from 'react';
import Loadable from 'react-loadable';
// 高阶组件四种使用场景
// 1. 操作props
// 2. 访问ref
// 3. 状态提升
// 4. 包装组件，实现布局效果

// import('./pages/login').then(res => {
//   console.log('res:', res.default)
// })


const MyLoading = () => {
  return <div>Loading...</div>
}

// const MyLoadable = () => {
//   return Loadable({
//     loader: () => import('../pages/home/index'),
//     loading: MyLoading,
//   });
// }

// const Home = Loadable({
//   loader: () => import('../pages/home/index'),
//   loading: MyLoading,
// });


const AsyncLoadable = (WrapperCom:any) => {
  return class extends Component {
    state:any = {
      Com: null
    }
    componentDidMount() {
      this.setState({
        Com: Loadable({
          loader: WrapperCom,
          loading: MyLoading,
        })
      })
    }
    render() {
      const { Com } = this.state;
      return Com ? <Com /> : null
    }
  }
}

export default AsyncLoadable;
